/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Nov 2, 2014, 12:48:22 PM
    Author     : Nguyen Chien
*/
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), 
      local('OpenSans-Light'), 
      url(http://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTXwUvq1pQaUIDqPgpae5ItU.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/59ZRklaO5bWGqF5A9baEET8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSnwUvq1pQaUIDqPgpae5ItU.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/xjAJXh38I15wypJXxuGMBkbnXQ06sCSpaytluCdpFnY.woff) format('woff');
}
* {
    margin: 0;
    padding: 0;
}
a{text-decoration: none;}
li {
    list-style: none;
}

body {
    font-size: 14px;
    height: 100%;
    font: 13px/22px 'OpenSans-LightItalic';
    line-height:22px;

}

#wrapper {
    width: 100%;
}

#header {
    width: 100%;
    float: left;
    position: relative;
}

#header #slider {
    width: 100%;
    height:500px;
    float: left;
}
#header #slider .covervid-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%;
}

#header #slider img {
    width: 100%;
}

/*---------nav-left----*/
.nav-left {
    position: absolute;
    top: 0;
    left: 0;
}

/*---nav-right---*/
.nav-right {
    position: absolute;
    right: 0;
    z-index: 9999;
    float: right;
    margin: 10px;
    top: 0;
}

.nav-right li {
    list-style: none;
    height: 39px;
    padding: 2px;
    width: 40px;
}

.nav-right span {
    width: 0;
    right: 38px;
    padding: 0;
    position: absolute;
    overflow: hidden;

    font-family: 'Myriad Pro', Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.6px;
    white-space: nowrap;
    line-height: 39px;

    -webkit-transition: 0.25s;

    -moz-transition: 0.25s;
    transition: 0.25s;
}

.nav-right a {
    background: url('../images/nag-right.jpg') no-repeat;

    height: 39px;
    width: 38px;
    display: block;
    position: relative;
}

.nav-right a:hover span {
    width: auto;
    padding: 0 20px;
    overflow: visible;
}

.nav-right a:hover {
    text-decoration: none;

    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc;
}

.nav-right .home {
    background-position: 0 0;
}

.nav-right .home:hover {
    background-position: 0 -39px;
}

.nav-right .home span {
    background-color: #7da315;
    color: #3d4f0c;
    text-shadow: 1px 1px 0 #99bf31;
}

.nav-right .about {
    background-position: -38px 0;
}

.nav-right .about:hover {
    background-position: -38px -39px;
}

.nav-right .about span {
    background-color: #1e8bb4;
    color: #223a44;
    text-shadow: 1px 1px 0 #44a8d0;
}

.nav-right .services {
    background-position: -76px 0;
}

.nav-right .services:hover {
    background-position: -76px -39px;
}

.nav-right .services span {
    background-color: #c86c1f;
    color: #5a3517;
    text-shadow: 1px 1px 0 #d28344;
}

.nav-right .portfolio {
    background-position: -114px 0;
}

.nav-right .portfolio:hover {
    background-position: -114px -39px;
}

.nav-right .portfolio span {
    background-color: #d0a525;
    color: #604e18;
    text-shadow: 1px 1px 0 #d8b54b;
}

.nav-right .contact {
    background-position: -152px 0;
}

.nav-right .contact:hover {
    background-position: -152px -39px;
}

.nav-right .contact span {
    background-color: #af1e83;
    color: #460f35;
    text-shadow: 1px 1px 0 #d244a6;
}

/*----content----*/
#content {
    float: left;
    width: 100%;
    z-index: 99999;
    border: 1px solid #ccc;
    height: auto;
}

#content .slider-content {
    width: 30%;
    float: left;
    height: auto;
    margin: 0.5%;
}

#content .slider-content img {
    width: 100%;
    height: 100%;
}

/*-----list-content---*/
#content .list-content {
    width: 68.5%;
    float: left;
    margin-top: 0.5%;
    margin-right:0.5%;
    height: auto;
    position: relative;
}

#content .list-content li {
    width: 24.475%;
    float: left;
    margin-right: 0.7%;
    margin-bottom: 0.7%;
}
/*-----background----*/
#content .list-content li:nth-child(1){
    background: #e7ded4;
}
#content .list-content li:nth-child(2){
    background: #e7ded4;
}
#content .list-content li:nth-child(3){
    background: #e7ded4;
}
#content .list-content li:nth-child(4){
    background: #e7ded4;
}
#content .list-content li:nth-child(5){
    background: #e7ded4;
}
#content .list-content li:nth-child(6){
    background: #e7ded4;
}
#content .list-content li:nth-child(7){
    background: #e7ded4;
}
/*-----end background--*/
#content .list-content li:nth-child(4) {
    margin-right: 0;
}

#content .list-content li:nth-child(8) {
    margin-right: 0;
}

#content .list-content li img {
    width: 100%;
    float: left
}

#content .list-content ul.nav {
    margin-top: 0.7%;
}

#content .list-content .pro {
    z-index: 99999;
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
}

/*---- container----*/
#container {
    width: 100%;
    float: left;
    margin-top: 0.5%;
    height: auto;
}
#container li{
    width: 20%;
    float: left;
    height: auto;
}

#container li:nth-child(1){
    background: #ff0000;
    height: 556px;
}
#container li:nth-child(2){
    background: #ddd;
    height: 556px;
}
#container li:nth-child(3){
    background: #000;
    height: 556px;
}
#container li img{
    height: 556px;
}

/*-----page----*/
#page{
    width: 100%;
    float:left;
    height: 796px;
    background: url("../images/bg.jpg");
}
#page .container{
    width: 25%;
    float: right;
    margin-right:5%;
}
#page .container li{
    width: 100%;
    float: left;
    height: auto;
    margin: 5%;
}
#page .container li .info{
    width:50%;
    float:left;
    padding:5%;
}
#page .container li a{
    font-family: Tahoma;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 1%;
    color: #000;
    text-align: center;
}

#page .container li .info p{
    font-family: Arial;
}
#page .container li .thumb{
    width: 36%;
    float: left;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    border-radius:100%;
}
#page .container li .thumb img{
    display: block;
    margin-right: auto;
    margin-left: auto;
}
#page .container li .thumb:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

/*----footer---*/
#footer{
    width: 100%;
    float: left;
    background: url("../images/bg-footer.png");
    height: 500px;
}
#footer .info h3{
    font-family:SourceSansPro;
    font-size:22px;
    font-weight: normal;
    text-align: center;
    padding-top:5%;
    line-height: 39px;
}
#footer .info p{
    font-family:Arial;
    font-size:14px;
    font-weight: normal;
    text-align: center;
    padding-top:5%;
}
#footer .container{
    width: 60%;
    margin-left:20%;
    margin-top: 5%;
}
.dropdown {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.06)) repeat scroll 0 0 #F2F2F2;
    border-color: #FFFFFF #F7F7F7 #F5F5F5;
    border-image: none;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
    display: inline-block;
    height:33px;
    overflow: hidden;
    position: relative;
    width:250px;
}
.dropdown:before, .dropdown:after {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #000 rgba(0, 0, 0, 0);
    border-image: none;
    border-style: dashed;
    border-width: 4px;
    content: "";
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 9px;
    width: 0;
    z-index: 2;
}
.dropdown:before {
    border-bottom-style: solid;
    border-top: medium none;
}
.dropdown:after {
    border-bottom: medium none;
    border-top-style: solid;
    margin-top: 7px;
}
.dropdown-select {
    background: #fff;
    border: 0 none;
    border-radius: 0;
    color: #000;
    font-size: 14px;
    height:33px;
    line-height: 14px;
    margin: 0;
    padding: 6px 8px 6px 10px;
    position: relative;
    width: 130%;
    font-weight: bold;
}
.dropdown-select:focus {
    color: #394349;
    outline: 2px solid #49AFF2;
    outline-offset: -2px;
    width: 100%;
    z-index: 3;
}
.dropdown-select > option {
    background: none repeat scroll 0 0 #F2F2F2;
    border-radius: 3px;
    cursor: pointer;
    margin: 3px;
    padding: 6px 8px;
    text-shadow: none;
}
.lt-ie9 .dropdown {
    z-index: 1;
}
.lt-ie9 .dropdown-select {
    z-index: -1;
}
.lt-ie9 .dropdown-select:focus {
    z-index: 3;
}
    .dropdown-select {
        padding-left: 6px;
    }

    .dropdown-dark {
        background: #199ed7;

    }
    .dropdown-dark:before {
        border-bottom-color: #fff;
    }
    .dropdown-dark:after {
        border-top-color: #fff;
    }
    .dropdown-dark .dropdown-select {
        background: none repeat scroll 0 0 #199ed7;
        color: #fff;
    }
    .dropdown-dark .dropdown-select:focus {
        color: #000;
    }
    .dropdown-dark .dropdown-select > option {
        background: none repeat scroll 0 0 #F2F2F2;
    }
